<template>
  <div id="liquid" ref="liquidChart"></div>
</template>

<script>
export default {
  name: "liquidChart",
  props: {
    title:String,
    x:Number,
    y:Number
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.liquidChart);
    this.initOption();
  },
  methods: {
    initOption() {
      console.log(this.x,this.y)
      const p = (this.x/this.y).toFixed(4)
      this.option = {
    series: [
        {
          name:this.title,
            type: 'liquidFill',
            radius: '45%',
            center: ['50%', '50%'],
            data: [p,p,p,p], // data个数代表波浪数
            backgroundStyle: {
                borderWidth: 1,
                color: 'rgb(255,127,45,0.1)',
            },
            label:{
                 color: 'rgb(255,127,45,1)',
                
                normal:{
                    formatter:'{a}\n\n{c}',
                    fontSize:17,
                    color: 'rgb(255,127,45,1)',
                }

            },
            // 修改波浪颜色
            color:['#FF7F2D'], //所有波浪一个颜色
            // color:['yellow','red','pink'], 每个波浪不同颜色，颜色数组长度为对应的波浪个数
           
            outline: {
                show: false,
            },
        },
        {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['50%', '52%'],
            hoverAnimation: false,
            data: [
                {
                    name: '',
                    value: this.x,
                    labelLine: {
                        show: false,
                    },
                    itemStyle: {
                        color: '#FF7F2D',
                    },
                    emphasis: {
                        labelLine: {
                            show: false,
                        },
                        itemStyle: {
                             color: 'rgba(255,127,45,0.2)',
                        },
                    },
                },
               
                {
                    //画剩余的刻度圆环
                    name: '',
                    value: this.y-this.x,
                    itemStyle: {
                        color:  'rgba(255,159,98,0.6)',
                    },
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                    emphasis: {
                        labelLine: {
                            show: false,
                        },
                        itemStyle: {
                            color: 'rgba(255,159,98,0.2)',
                        },
                    },
                },
            ],
        },
    ],
};
      this.myChart.setOption(this.option);
    },
  },
  watch: {
    x: {
      handler(val, oldval) {
        //this.myChart.clear();
        this.initOption();
      },
    },
    y: {
      handler(val, oldval) {
        //this.myChart.clear();
        this.initOption();
      },
    },
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
